<template>
    <main-wrap ref="mianEle" :type="1">
        <div class="topImgBox">
            <Back class="dtBack" :type="1"/>
            <div class="modifyBgBtn" :style="{'top':statusBarHeight?(statusBarHeight+10 +'px'):''}">
                <upload-img-btn class="textBtn" :isUploadServer="true" text="更换背景" @success="upBgImg"/>
            </div>
            <div class="bgimg">
                <Image v-if="userInfo.backgroundUrl" :url="userInfo.backgroundUrl"/>
            </div>
            <div class="avater">
                <Image v-if="userInfo.headUrl" :url="userInfo.headUrl"/>
            </div>
        </div>
        <div class="artlistIntroduce">
            <div class="atBtn">
                <upload-img-btn text="上传个人头像" :isUploadServer="true" @success="upHeadImg"/>
            </div>
            <ul class="showItemList">
                <li>
                    <label>昵称</label>
                    <div class="address" @click="openDg">{{userInfo.nick || ''}}</div>
                    <span @click="openDg"><img src="/images/rjt.png" alt=""></span>
                </li>
                <li>
                    <label>注册时间</label>
                    <div class="address">{{userInfo.createTime}}</div>
                </li>
                <li>
                    <label>登录账号</label>
                    <div class="address">{{userInfo.userName}}</div>
                </li>
            </ul>
        </div>
    </main-wrap>
    <my-dailog v-model:show="showFlag">
        <template v-slot:header>
            <h5 class="autDgTitle">修改昵称</h5>
        </template>
        <div class="nkBox">
            <my-input class="nicknamemd" v-model="nickname" type="text" placeholder="请输入昵称"/>
        </div>
        <template v-slot:footer>
            <div class="autDgBtn">
                <div class="bItem">
                    <my-button text="取消" @click="showFlag=false"/>
                </div>
                <div class="bItem">
                    <my-button text="确定修改" @click="updateNick"/>
                </div>
            </div>
        </template>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import uploadImgBtn from '@/components/uploadImgBtn.vue'
import Back from '@/components/back.vue'
import myDailog from '@/components/myDailog.vue'
import myButton from '@/components/myButton.vue'
import myInput from '@/components/myInput.vue'
import { toast } from '@/utils/common'
export default {
    components:{
       mainWrap,
       Image,
       uploadImgBtn,
       Back,
       myDailog,
       myButton,
       myInput
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            userInfo:computed(()=>store.state.arApi.userInfo),
            statusBarHeight:computed(()=>store.state.arApi.statusBarHeight),
            showFlag:false,
            nickname:''
        })

        onMounted(async()=>{
            await store.dispatch('arApi/get_userInfo')
            state.nickname = state.userInfo.nick
        })

        const upBgImg = async (imgObj)=>{ // 上传背景图片
            await store.dispatch('arApi/upload_bg_img',{
                backgroundUrl:imgObj.url
            })
            store.dispatch('arApi/get_userInfo')
        }

        const upHeadImg = async (imgObj)=>{ // 上传头像
            await store.dispatch('arApi/upload_head_img',{
                headUrl:imgObj.url
            })
            store.dispatch('arApi/get_userInfo')
        }

        const goBack = ()=>{
            router.back()
        }

        const openDg=()=>{
            state.showFlag = true
        }

        const updateNick = async()=>{
            if(!state.nickname) return toast('请输入昵称')
            if(state.nickname == state.userInfo.nick) return state.showFlag = false  // 没有修改
            const res = await store.dispatch('arApi/update_nick',{nick:state.nickname})
            if(res.success){
                store.dispatch('arApi/get_userInfo')
                state.showFlag = false
            }
        }

        return{
            ...toRefs(state),
            goBack,
            upBgImg,
            upHeadImg,
            openDg,
            updateNick
        }
    }
}
</script>

<style lang="scss" scoped>
     .topImgBox{
        width: 100%;
        position: relative;
        z-index: 10;
        &::before{
            content: '';
            display: block;
            position: absolute;
            z-index: 8;
            width: 100%;
            left: 0;
            top: 0;
            height: 240px;
            background: url('/images/dttop.png') left top no-repeat;
            background-size:100% 100% ;
        }
        img{
            display: block;
            width: 100%;
        }
        .bgimg{
            width: 100%;
            height: 500px;
            overflow: hidden;
        }
        .back{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 10;
            left: 15px;
            top: 20px;
            width: 36px;
            height: 36px;
            border-radius:50% ;
            img{
                display: block;
                width: 100%;
                height: 100%;
                &:hover{
                    opacity: 0.5;
                }
            }
        }
        .modifyBgBtn{
            position: absolute;
            z-index: 10;
            right: 50px;
            top: 40px;
            font-weight: 500;
            font-size: 28px;
            color: var(--baseColor);
        }
        .avater{
            position: absolute;
            z-index: 10;
            left: 50%;
            bottom: -85px;
            margin: 0 0 0 -85px;
            width: 170px;
            height: 170px;
            overflow: hidden;
            border-radius:50% ;
        }
    }
    .artlistIntroduce{
        padding: 0 40px;
        .atBtn{
            padding: 114px 0 60px 0;
            text-align: center;
        }
        .showItemList{
            list-style: none;
            font-size: 30px;
            li{
                display: flex;
                border-bottom:1px solid rgba(255, 255, 255, 0.2) ;
                padding: 30px 0;
                &:first-child{
                    border-top:1px solid rgba(255, 255, 255, 0.2) ;
                }
                label{
                    font-weight: normal;
                    width: 170px;
                    color: rgba(255, 255, 255, 0.8);
                }
                .address{
                    flex: 1;
                    font-weight: 500;
                }
                span{
                    display: flex;
                    justify-content:end; 
                    align-items: center; 
                    img{
                        width: 12px;
                        height: 20px;
                    }
                }
            }
        }
        
    }

     .autDgTitle{
        font-size: 40px;
        text-align: center;
        padding: 0 0 30px 0;
    }
    .autDgBtn{
        display: flex;
        padding: 30px 0 10px 0;
        .bItem{
            flex: 1;
            padding: 0 15px 0 0;
            &.oneBtn{
                padding: 0;
            }
            &+.bItem{
                padding: 0 0 0 15px;
            }
        }
    }
    .nkBox{
        padding: 10px 0 30px 0;
        .nicknamemd{
            border: 1px solid rgba(255, 255, 255, 0.5);
        } 
    }
</style>